<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"//>	
		<link rel="stylesheet" type="text/css" href="../../css/app.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/appOther.css"/>
		<style type="text/css">
			.mui-pull-left{
    			color: #FFFFFF;	
	    		line-height:44px ;
	    	}
	    	.mui-pull-right{
	    		color: #FFFFFF;	
	    		line-height:44px ;
	    		
	    	}
	    	.mui-title{
	    		color: #FFFFFF;
	    	}
	    	.mui-icon.iconfont{
	    		font-size: 18px;
	    	}
	    	nav .mui-icon{
	    		left:50%;
	    		margin-left: -12px;
	    	}
	    	.mui-bar.mui-bar-nav{
	    		background: #0072dc;
	    	}
	    	
	    	.mui-control-item.text_submain{
	    		line-height: 32px;
	    	}
	    	.topic_content img{
	    		width: auto !important;
	    		height: auto !important;
	    		max-width: 100%;
	    	}
		</style>
	</head>

	<body id='app'>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-pull-left">
				<i class="mui-icon iconfont">&#xe62f;</i> 
				<span class="text_submain" style="vertical-align: 2px;">返回</span>
			</a>		
			<h1 class="mui-title" id="title">{{userInfo.Username}}</h1>
		</header>
		<div class="mui-content">
		    <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#heFollows">
						我关注的
					</a>
					<a class="mui-control-item mui-active" href="#followHes">
						关注我的
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6" style="transform: translate3d(180px, 0px, 0px) translateZ(0px);"></div>
				<div class="mui-slider-group" style="height: 600px;">
					<div id="heFollows" class="mui-slider-item mui-control-content">
						<div id='wrapperHeFollows' style="min-height: 300px;" class="mui-scroll-wrapper">
							<div id='scrollHeFollows' style="min-height: 300px;" class="mui-scroll" data-type='heFollows'>
								<ul class="mui-table-view app-hide">
									<li @tap='goMember(member.ID, member.Name)' v-for="member in heFollows" class="mui-table-view-cell">
										<i class="mui-pull-left mui-icon iconfont i_label"  style="color: #666666;"><img :src="member.Avatar" alt=""  style="border-radius: 50%;width: 20px;height: auto;"></i>
										<p>
											<span class="text_subtitle label-title">{{member.Name}}</span>
										</p>	
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="followHes" class="mui-slider-item mui-control-content mui-active">
						<div id='wrapperFollowHes' style="min-height: 300px;" class="mui-scroll-wrapper">
							<div id='scrollFollowHes' style="min-height: 300px;" class="mui-scroll" data-type='followHes'>
								<ul class="mui-table-view app-hide">
									<li @tap='goMember(member.ID, member.Name)' v-for="member in followHes" class="mui-table-view-cell">
										<i class="mui-pull-left mui-icon iconfont i_label"  style="color: #666666;"><img :src="member.Avatar" alt=""  style="border-radius: 50%;width: 20px;height: auto;"></i>
										<p>
											<span class="text_subtitle label-title">{{member.Name}}</span>
										</p>	
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="UTF-8">
				var vm=new Vue({
					el:'#app',
					data: {
						userInfo:{Username:''},
						heFollows:[],
						followHes:[],
						scrollHeFollow:{},
						scrollFollowHe:{},
						paramObj:{
							PageSize:6,
							CurPageHeFollow:1,
							CurPageFollowHe:1,
						}
					},
					computed:{
						uid:function () {
							return this.userInfo.UserID;
						}
					},
					ready:function () {
						var me = this;
						$('#app .app-hide').show();
						mui.init();
//						ui.fixScroll(0);
						me.scrollHeFollow=ui.setPullToRefresh('#wrapperHeFollows','#scrollHeFollows',this.getHeFollows);
						me.scrollFollowHe=ui.setPullToRefresh('#wrapperFollowHes','#scrollFollowHes',this.getFollowHes);
						mui.plusReady(function () {
								me.getUserInfo();
								me.getHeFollows(true);
								me.getFollowHes(true);
						});
						document.addEventListener('reloadHeFollows',function () {
							me.getHeFollows(true);
						},false);
						document.addEventListener('reloadFollowHes',function () {
							me.getFollowHes(true);
						},false);
					},
					methods:{
						getUserInfo:function(){
							this.userInfo = persistent.uinfo();
							console.log(JSON.stringify(persistent.uinfo()));
							var current = plus.webview.currentWebview();
							showPage(current);
						},
						goMember:function(mid, mname){
							if(!mid){
								alert('mid 为空，无法跳转！');
								return;
							}
							openPage('../circle/otherCenter.html','otherCenter_'+mid,{uid:mid, uname:mname})
						},
						getHeFollows: function (isRefresh) {
							var me = this;
							var nomore = false;
							me.paramObj.CurPageHeFollow = isRefresh?1:me.paramObj.CurPageHeFollow+1;
							ajax.post(api.user.getMeFollows,{
								PageSize:me.paramObj.PageSize,
								CurPage: me.paramObj.CurPageHeFollow,
							},function (data) {
								me.heFollows = isRefresh?data.Data:me.heFollows.concat(data.Data);
								nomore=data.Data.length<me.paramObj.PageSize;
							},false, function (data) {
								ui.clearScrollAnimal(me.scrollHeFollow.puller, isRefresh, nomore);
							});
						},
						getFollowHes: function (isRefresh) {
							var me = this;
							var nomore = false;
							me.paramObj.CurPageFollowHe = isRefresh?1:me.paramObj.CurPageFollowHe+1;
							ajax.post(api.user.getFollowMes,{
								PageSize:me.paramObj.PageSize,
								CurPage: me.paramObj.CurPageFollowHe,
							},function (data) {
								me.followHes = isRefresh?data.Data:me.followHes.concat(data.Data);
								nomore=data.Data.length<me.paramObj.PageSize;
							},false, function (data) {
								ui.clearScrollAnimal(me.scrollFollowHe.puller, isRefresh, nomore);
							});
						},
					}
				})
		</script>	
	</body>

</html>